<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>forceupdate</title>
  </head>
  <body>
    <div id="app">
      <button @click="clearList">改变数据的长度清空数组</button>
      <button @click="addObjParams">给对象数组添加一个字段</button>
      <button @click="changeObjParams">改变对象下的属性值</button>
      <ul>
        <li v-for="item of list" :key="item">{{ item }}</li>
      </ul>
      {{ arr[2].a }} {{ arr[2].b }} {{ arr[2].c }}
      <div>{{ obj }} - {{ obj.a.d }}</div>
    </div>
  </body>
  <script src="../lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          list: ["a", "b", "c"],
          arr: [
            { a: 1, b: 1 },
            { a: 11, b: 11 },
            { a: 111, b: 111 },
          ],
          obj: {
            a: {
              b: 2,
            },
          },
        };
      },
      methods: {
        clearList() {
          this.list.length = 0;
        },
        addObjParams() {
          this.arr[2].c = 300;
        },
        changeObjParams() {
          this.obj.a.d = 666;
        },
      },
    }).mount("#app");
  </script>
</html>
